<template>
    <el-table :data="users" >
        <el-table-column 
            prop="user_id"
            label="ID"
            width="100">
        </el-table-column>
        <el-table-column 
            prop="user_name"
            label="登录名"
            width="200">
        </el-table-column>
        <el-table-column 
            prop="name"
            label="用户名"
            width="200">
        </el-table-column>
        <el-table-column 
            prop="last_login"
            label="最后登录时间"
            width="200">
        </el-table-column>
        <el-table-column 
            prop="is_super"
            label="超级用户"
            width="100">
        </el-table-column>
        <el-table-column 
            prop="is_lock"
            label="锁定"
            width="100">
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="text" @click="scope.row.showDialog = true">修改</el-button>
                <el-button type="text" @click="delUser(scope)">删除</el-button>
                <el-dialog title="用户信息" v-model="scope.row.showDialog">
                <el-form :model="editData" v-loading="submiting">
                    <el-form-item label="登录名" label-width="80px">
                        <el-input  autocomplete="off" v-model="scope.row.user_name" ></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" label-width="80px">
                        <el-input  autocomplete="off" v-model="scope.row.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="是否锁定" label-width="80px">
                        <el-input  autocomplete="off" v-model="scope.row.is_lock" ></el-input>
                    </el-form-item>
                    <el-form-item label="超级用户" label-width="80px">
                        <el-input  autocomplete="off" v-model="scope.row.is_super" ></el-input>
                    </el-form-item>
                    <el-form-item label="用户角色" label-width="80px">
                    <el-select v-model="scope.row.role" placeholder="修改用户角色">
                        <el-option label="管理员" value="0"></el-option>
                        <el-option label="SEO" value="1"></el-option>
                        <el-option label="作者" value="2"></el-option>
                    </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                    <el-button @click="scope.row.showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="submitEdit(scope.row)">确 定</el-button>
                    </span>
                </template>
                </el-dialog> 
            </template>
        </el-table-column>
    </el-table>
    
</template>

<script>
import { adminUser } from '@/api/content.js'
import { mapMutations, mapState } from 'vuex';
export default {
    name: "ADUser",
    data(){
        return {
            dialogFormVisible: false,
            editData: {
                user_name: '',
                name: '',
            },
            submiting: false,
            showDialog: false,
        }
    },
    methods: {
         ...mapMutations('au', [
            'getUsers',
            'spliceUser',
        ]),
        async delUser(scope){
            this.$confirm('确定删除吗？', {
                confrimButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(()=>{
                let row = scope.row;
                let index = scope.index_;
                let res = adminUser.delUser(row.user_id);
                if(res){
                    this.$message({
                        type: 'success',
                        message: '删除成功',
                    })
                    this.spliceUser(index)
                }else{
                    this.$message({
                        type: 'false',
                        message: '删除失败',
                    })
                }
            })
            .catch(()=>{
                this.$message({
                    type: 'info',
                    message: "用户未删除"
                })
            })
        },
        async submitEdit(row){
            this.submiting = true;
            let res = await adminUser.editUserInfo(row)
            console.log('res', res)
            this.submiting = false;
            row.showDialog =  false;
        }

    },
    computed: {
       ...mapState('au', [
           'users'
       ])
    },
    async created(){
        this.getUsers()
    }
}
</script>